<template>
	<view class="p-30">
		<div class="shadow p-20 rounded-20">
			<div class="flex">
				<image :src="detail.pic" mode="aspectFill" class="w-50 h-50"></image>
				<div class="fz40 ml-20">{{ detail.name }}</div>
			</div>
			<div class="fz24 text-gray-600 mt-10 mb-10" style="margin-left: 70rpx;">{{ detail.address }}</div>
			<div class="flex">
				<div class="text-gray-600 fz22 pl-10 pr-10 pt-5 pb-5 rounded-10"
					style="margin-left: 70rpx;border: 1rpx solid #a6a6a6;">
					{{ detail.is_open == 1 ? '对外开放' : '不对外开放' }}
				</div>
				<div class="text-gray-600 fz22 pl-10 pr-10 pt-5 pb-5 rounded-10 ml-20"
					style="border: 1rpx solid #a6a6a6;">
					{{ detail.is_charge == 1 ? '收费停车' : '免费停车' }}
				</div>
			</div>
			<div class="flex mt-20" style="overflow-x: auto;">
				<image @click="zhanshi(img)" v-for="(img, index) in detail.images ? detail.images.split(',') : []" :key="index" :src="img"
					mode="aspectFill" class="flex-shirnk-0 mr-20 rounded-10" style="width: 288rpx;height: 144rpx">
				</image>
			</div>
		</div>

		<div class="shadow mt-20 p-20 rounded-20">
			<div class="font-bold">电站信息</div>
			<div class="flex">
				<div class="fz36 text-gray-600 mr-20 mt-10">服务提供</div>
				<div class="fz32 text-blue" style="padding-top: 3px;">{{ detail.name }}</div>
			</div>
			<div class="flex">
				<div class="fz36 text-gray-600 mr-20 mt-10">客服热线</div>
				<div class="fz32 text-blue" style="padding-top: 3px;" @click="tel(detail.phone)">{{ detail.phone }}</div>
			</div>
		</div>

		<div class="between rounded-20 shadow p-20 mt-20 font-bold">
			<div class="flex-1 center " :class="{ 'text-orange': tabIndex == 0 }" @click="tabIndex = 0">电桩 ({{
				detail.device_count }})</div>
			<div class="line" style="height: 40rpx;background: #d8d8d8;width: 1rpx;"></div>
			<div class="flex-1 center" :class="{ 'text-orange': tabIndex == 1 }" @click="tabIndex = 1">车位 ({{
				detail.park_count }})</div>
		</div>


		<div class="mt-20">
			<div v-for="item in detail.device" v-show="tabIndex == 0">
				<PileVue :item="{ data: item }" />
			</div>
			<div v-for="item in detail.park" v-show="tabIndex == 1">
				<LotVue :item="{ data: item }" />
			</div>
			<Nomore v-if="tabIndex == 0 && detail.device && detail.device.length == 0" />
			<Nomore v-if="tabIndex == 1 && detail.park && detail.park.length == 0" />
		</div>

		<div class="rounded-20 shadow p-20 mt-20" >
			<div class="font-bold fz36 mb-20">评论</div>
			<div class="flex">
				<div @click="ping_action(0)" class="bg-gray-300 text-gray-600 pl-20 pr-20 pt-5 pb-5 fz36 rounded-40" :class="ping==0?'bg-blue text-white':''">全部</div>
				<div @click="ping_action(1)" class="bg-gray-300 text-gray-600 pl-20 pr-20 pt-5 pb-5 fz36 rounded-40 ml-20" :class="ping==1?'bg-blue text-white':''">好评</div>
				<div @click="ping_action(2)" class="bg-gray-300 text-gray-600 pl-20 pr-20 pt-5 pb-5 fz36 rounded-40 ml-20" :class="ping==2?'bg-blue text-white':''">中评</div>
				<div @click="ping_action(3)" class="bg-gray-300 text-gray-600 pl-20 pr-20 pt-5 pb-5 fz36 rounded-40 ml-20" :class="ping==3?'bg-blue text-white':''">差评</div>
			</div>

			<div v-if="comment.length > 0" v-for="item in comment">
				<div class="between mt-30" style="align-items: flex-start;" >
					<div class="flex">
						<image :src="item.member.headimg" mode="aspectFill" class="w-80 h-80 rounded-full mr-20">
						</image>
						<div>
							<div class="text-blue">
								{{ item.member.phone.substring(0, 3) }}****{{ item.member.phone.substring(7) }}</div>
							<div class="text-gray-600 fz24">
								打分
								<image v-for="n in item.score" :key="n" src="/static/icon/star.png" mode="widthFix"
									class="w-20 mr-10 mt-5"></image>
							</div>
						</div>
					</div>
					<div class="fz24 text-gray-600">{{ item.create_at }}</div>
				</div>
				<div style="margin-left: 100rpx;">
					<div class="fz36 mt-20">{{ item.comment }}</div>
					<div class="flex mt-20 flex-wrap">
						<image v-for="(img, index) in item.images.split(',')" :key="index" :src="img"
							mode="aspectFill" class="w-100 h-100 mb-20 mr-20 rounded-10 flex-shirnk-0"></image>
					</div>
				</div>
			</div>
			<div v-if="comment.length <= 0" style="padding: 30rpx;padding-left: 0;color: #ccc;">
				暂未评论
			</div>
		</div>
	</view>
</template>

<script>
import PileVue from '../../components/common/Pile.vue';
import LotVue from '../../components/common/Lot.vue';
export default {
	components: {
		PileVue,
		LotVue
	},
	onLoad(option) {
		console.log(option)
		this.id = option.id
		this.getDetail()
		this.getComment()
	},
	data() {
		return {
			ping:0,
			tabIndex: 0,
			id: '',
			detail: {},
			comment: [],
		}
	},
	methods: {
		zhanshi(pic){
			uni.previewImage({
				urls:[pic]
			})
		},
		ping_action(i){
			this.ping=i
			this.getComment()
		},
		tel(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
		async getDetail() {
			const res = await this.http("get", "/api/station/info", {
				id: this.id
			})
			this.detail = res.data
		},
		getComment() {
			this.http("get", "/api/station/comment", {
				id: this.id,
				ping:this.ping
			}).then(res => {
				this.comment = res.data
			})
		}
	}
}
</script>

<style>
	.text-white{ color: #fff !important;}
</style>